// 操作元素

// 1.获取/修改元素内容:innerText--只针对文本,innerHTML--针对文本与标签
// 选择元素
// let text = document.querySelector("div")
// console.log(text.innerText)//只返回元素文本
// console.log(text.innerHTML)//包含html标签内容
// 修改元素内容--选择元素--修改元素
// text.innerText = "'<strong>加粗的内容</strong>';"
// console.log(text.innerText)
// text.innerHTML = "'<strong>加粗的内容</strong>';"//会解析元素内容标签
// console.log(text.innerHTML)

// 2.获取/修改元素属性--console.dir(对象)--修改元素属性元素对象.属性 = 修改值
let img = document.querySelector("img")
// 打印所有元素属性
console.dir(img)
// 修改元素属性
img.title = "这是一个图片吧~"
// 设置元素属性事件
img.onclick = function() {
    alert("这是一个图片...")
}

// 3.获取/修改表单元素
let btn = document.querySelector("input")
btn.onclick = function() {
    if(btn.value == "播放")
    {
        btn.value = "暂停";
    }else {
        btn.value = "播放";
    }
}
// 计数器
let input = document.querySelector(".input")
let add = document.querySelector(".add")
add.onclick = function() {
    input.value = parseInt(input.value) + 1;
}
let min = document.querySelector(".min")
min.onclick = function() {
    input.value = parseInt(input.value) - 1;
}
// 全部选中
let all = document.querySelector(".all")
let girl = document.querySelectorAll(".girl")
all.onclick = function() {
    for(let i = 0;i < girl.length;i++) {
        girl[i].checked = all.checked
    }
}

for(let i = 0;i < girl.length;i++) {
    girl[i].onclick = function() {
        for(let j = 0;j < girl.length;j++) {
            if(girl[j].checked == false) {
                all.checked = false;
                break;
            }else {
                all.checked = true;
            }
        }
    }
}

// 4.获取/修改样式属性
// 行内样式操作（只针对标签上的固定样式）
// 获取标签对象
let hn = document.querySelector("div")
hn.onclick = function() {
    // 标签对象.style.行内样式 = 属性值（注意属性值类型）
    // hn.style.fontSize = parseInt(hn.style.fontSize) + 10 + "px";
    // 标签对象.style.cssText = [属性名+属性值]
    let size = parseInt(hn.style.fontSize) + 10
    hn.style.cssText = "font-size:" + size + "px";
 }

// 类名样式操作
let change = document.querySelector(".light")
change.onclick = function() {
    if(change.className == "light") {
        change.className = "dark";
    }else {
        change.className = "light";
    }
}
